<template>
	<view class="page detail bgf5">
		<view class="flex flexC flexB btns py14 bgff mt1 c33 fs12">
			<view class="flex1 aliC" @click="open('door')">
				<image src="/static/img/order/open_door.png" mode="aspectFill"></image>
				<view class="bold8">开大门</view>
			</view>
			<view class="flex1 aliC" @click="open('room')">
				<image src="/static/img/order/open_bao.png" mode="aspectFill"></image>
				<view class="bold8">开包厢</view>
			</view>
			<view class="flex1 aliC" @click="xuOrder">
				<image src="/static/img/order/xufei.png" mode="aspectFill"></image>
				<view class="bold8">续费</view>
			</view>
			<button class="flex1 shareBtn aliC"  open-type="share">
				<image src="/static/img/order/share.png" mode="aspectFill"></image>
				<view class="bold8">分享</view>
			</button>
			<view class="flex1 aliC" @click="clickRefund">
				<image src="/static/img/order/refund.png" mode="aspectFill"></image>
				<view class="bold8">退款</view>
			</view>
		</view>
		<view class="infobox flex flexC mt8 px15 py16 bgff">
			<image class="cover r10" src="/static/logo.jpg" mode="aspectFill"></image>
			<view class="flex1 fs12 ml15">
				<view class="flex flexC fs15 mb4">
					<text class="flex1">{{detail.shop_name}}</text>
					<text class="cff r20 status fs12 px3">{{detail.status_txt}}</text>
				</view>
				<view class="fs14 c33 mb2">{{detail.room_name}}</view>
				<view class="flex flexC fs12 c66 mb2">
					<text class="flex1">开始时间</text>
					<text>{{detail.book_start}}</text>
				</view>
				<view class="flex flexC fs12 c66 mb5">
					<text class="flex1">结束时间</text>
					<text>{{detail.book_end}}</text>
				</view>
				<view class="flex flexC fs13 c66 mb3" @click="callTel(detail.shop_mobile)">
					<text class="flex1 bold6">商家电话</text>
					<view class="bgf5 r8 mr7 flex flexC">
						<image class="w17" src="/static/img/icon/dh.png" mode="aspectFill"></image>
						<text class="c1b ml14">{{detail.shop_mobile}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="bgff mt8 px14 c66 fs14">
			<view class="c33 fs15 flex flexC pt18">
				<text class="lin mr6"></text>
				<text>支付信息</text>
			</view>
			<view class="flex flexC flexB borb py12 mx9 mt12">
				<text>预约时长</text>
				<text class="">{{detail.hour}}小时</text>
			</view>
			<view class="flex flexC flexB borb py12 mx9">
				<text>订单金额</text>
				<text class="">￥{{detail.amount}}</text>
			</view>
			<view  v-if="detail.tuan != ''"  class="flex flexC flexB borb py12 mx9">
				<text>团券使用</text>
				<text class="">{{detail.tuan}}</text>
			</view>
			<view  v-if="detail.mt_code != ''" class="flex flexC flexB borb py12 mx9">
				<text>美团券使用</text>
				<text class="">{{detail.mt_code}}</text>
			</view>
			<view  v-if="detail.dou_code != ''"   class="flex flexC flexB borb py12 mx9">
				<text>抖音券使用</text>
				<text class="">{{detail.dou_code}}</text>
			</view>
			<view  v-if="detail.ks_code != ''"   class="flex flexC flexB borb py12 mx9">
				<text>快手券使用</text>
				<text class="">{{detail.ks_code}}</text>
			</view>
			<view class="flex flexC flexB borb py12 mx9">
				<text>余额抵扣</text>
				<text class="">￥{{detail.balance}}</text>
			</view>
			<view class="flex flexC flexB py12 mx9">
				<text>实付款</text>
				<text class="cff0">￥{{detail.pay_amount}}</text>
			</view>
		</view>
		<view class="px14 pb40 bgff c66 mt10 fs14">
			<view class="c33 fs15 flex flexC pt18">
				<text class="lin mr6"></text>
				<text>订单信息</text>
			</view>
			<view class="flex flexC flexB borb py12 mx9 mt12">
				<text>订单编号：</text>
				<text>{{detail.order_no}}</text>
			</view>

			<view class="flex flexC flexB borb py12 mx9">
				<text>订单时间</text>
				<text>{{detail.create_time_text}}</text>
			</view>
			<view class="flex flexC flexB borb py12 mx9">
				<text>订单状态</text>
				<text class="r40 c57">{{detail.status_txt}}</text>
			</view>
			<view class="aliC flex flexC flexJC mt22" v-if="detail.status == 'payed' || detail.status == 'doing'">
				<button  @click="open('door')" class="r40 cff btn fs16" >开大门</button>
				<button @click="open('room')"  class="r40 cff btn ml10 fs16">开包厢</button>
				<button  @click="xuOrder" class="r40 cff btn ml10 fs16" >续费</button>
			</view>
			<view class="aliC flex flexC flexJC mt22">
				<button open-type="share" class="r40 cff btn fs16" v-if="detail.status == 'payed' || detail.status == 'doing'">分享</button>
				<button @click="clickRefund" class="r40 cff btn ml10 fs16" v-if="detail.status == 'payed'">退款</button>
				<button v-if="detail.status == 'payed'" @click="beforeConfirm()" class="r40 cff btn ml10 fs16">提前开包厢</button>
			</view>
		
		</view>
		
		
		<!-- 续费弹框 -->
		<uni-popup type="center" ref="popupXufei">
			<xufei v-if="yu != null" :item="yu" @xufeiPay="xufeiPay" @closeYuding="closeYuding"></xufei>
		</uni-popup>
	</view>
</template>

<script>
	const plugin = requirePlugin("myPlugin");

	export default {
		data() {
			return {
				order_no: '',
				detail: null,
				share: -1,
				yu: null,
				is_xu:-1
			};
		},
		onLoad(option) {

			this.order_no = option.order_no;
			if (option.share) {
				this.share = 1;
			}
			if(option.is_xu){
				this.is_xu = option.is_xu;
			}
			this.getDetail();
		},
		onShareAppMessage(res) {
			console.log(res);
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: this.detail.room_name + ",快来玩呀", //自定义分享标题
				path: '/pages/order/detail?order_no=' + this.detail.order_no +
					"&share=1", // '/pages/...'分享页面路径（打开分享时进入页），以/开头
			}
		},
		methods: {
			
			// clickShare(){
			// 	uni.showShareMenu({
			// 		withShareTicket:true,
			// 		menus:['shareAppMessage','shareTimeline']
			// 	})
			// },
			callTel(val){
				uni.showModal({
					content:'是否拨打商家电话',
					success(res) {
						if(res.confirm){
							uni.makePhoneCall({
								phoneNumber: val, // 要拨打的电话号码
								success: function () {
								  console.log('成功调起拨号盘');
								},
								fail: function (err) {
								  console.error('拨打电话失败', err);
								}
							});
						}
					}
				})
			},
			closeYuding() {
				this.$refs.popupXufei.close();
			},
			
			xuOrder() {
				
				if(this.detail.status == 'payed' || this.detail.status == 'doing'){
					let param = {
						order_no: this.order_no
					};
					let that = this;
					this.$api.xu(param).then(res => {
						console.info(JSON.stringify(res));
						if (res.code == 1) {
							that.yu = res.data;
							this.$refs.popupXufei.open();
						} else {
							uni.showToast({
								icon: 'none',
								title: res.msg
							})
						}
					
					})
				}else{
					uni.showToast({
						icon: 'none',
						title: '此订单不需续单'
					})
				}
				
			
			},

			xufeiPay(item) {
				
				let that = this;
				if(item.isComment == 1){
					uni.showModal({
						title:"提示",
						content:"您有一张免费的好评续时券，是否使用",
						confirmText:"使用",
						complete(res) {
							if(res.confirm){
								uni.navigateTo({
									url:'../discount/xuComment?id='+item.id
								})
							}else{
								that.requestXu(item);
							}
						}
					})
					return;
				}
				this.requestXu(item);
				
				
			},
			
			requestXu(item) {
				let param = {
					id: item.id,
					hour: item.hour
				};
				let that = this;
				this.$api.xufeiPay(param).then(res => {
					console.info(JSON.stringify(res));
					if (res.code == 1) {
						that.closeYuding();
						that.order_no = res.data.order_no;
						if (res.data.payInfo != '') {
							that.wechatPay(res.data.payInfo)
						} else {
							uni.redirectTo({
								url: '../order/detail?order_no=' + that.order_no
							})
						}

					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}

				})
			},

			wechatPay(payConfig) {
				let that = this;
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: payConfig.payTimeStamp,
					nonceStr: payConfig.paynonceStr,
					package: payConfig.payPackage,
					signType: payConfig.paySignType,
					paySign: payConfig.paySign,
					success: function(res) {

						uni.redirectTo({
							url: '../order/detail?order_no=' + that.order_no
						})

					},
					fail: function(err) {
						console.info(err);
						that.restore();
						uni.showToast({
							title: "取消续费",
							icon: 'none'
						});
					}
				});
			},

			beforeConfirm(){
				let that = this;
				
				uni.showModal({
					title:"提前开包厢提示",
					content:"提前开包厢后开始计时收费，是否确认开包厢",
					complete(res) {
						if(res.confirm){
							that.beforeOpen();
						}
					}
				})
			},

			beforeOpen() {
				
				 if(this.detail.status == 'payed'){
					 let param = {
					 	order_no: this.order_no
					 };
					 let that = this;
					 this.$api.beforeOpen(param).then(res => {
					 	console.info(JSON.stringify(res));
					 	if (res.code == 1) {
					 
							that.getDetail();
					 	}
					 	uni.showToast({
					 		icon: 'none',
					 		title: res.msg
					 	})
					 })
				 }else{
					 uni.showToast({
					 	icon: 'none',
					 	title: "此订单不允许提前开包厢"
					 })
				 }
				
			},

			clickRefund() {
				
				 if(this.detail.status !='payed'){
					 uni.showToast({
					 	icon: 'none',
					 	title: "此订单不允许退款"
					 })
					 return;
				 }
			
				let that = this;
				uni.showModal({
					title: "退款提示",
					content: "您是否确认退款",
					confirmText: "退款",
					complete(res) {
						if (res.confirm) {
							that.check();
						}
					}
				})
			},
			
			check(){
				let param = {
					order_no: this.order_no,
				};
				let that = this;
				this.$api.checkRefund(param).then(res => {
					console.info(JSON.stringify(res));
					if (res.code == 1) {
						if(res.data == 1){
							uni.showModal({
								title: "扣费提示",
								content: "您订单退款会扣留15%的费用，是否继续退款",
								confirmText: "退款",
								complete(res) {
									if (res.confirm) {
										that.refund();
									}
								}
							})
						}else{
							that.refund();
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						})
					}
				})
			},

			refund() {
				
				if(this.detail.mt_code != '' || this.detail.mt_code == null){
					uni.showModal({
					    title: '退款提示',
					    content: '美团团购订单，完成退款后，还需要去美团平台申请退款',
					    showCancel: false, // 不显示取消按钮
					    complete: function (res) {
					        console.log('用户点击了退款提示');
					    }
					});
				}
				
				if(this.detail.dou_code != '' || this.detail.dou_code == null){
					uni.showModal({
					    title: '退款提示',
					    content: '抖音团购订单，完成退款后，还需要去抖音平台申请退款',
					    showCancel: false, // 不显示取消按钮
					    complete: function (res) {
							console.log('用户点击了退款提示');
					    }
					});
				}

				let param = {
					order_no: this.order_no,
				};
				let that = this;
				this.$api.orderRefund(param).then(res => {
					console.info(JSON.stringify(res));
					if (res.code == 1) {
						that.getDetail();
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						})
					}
				})
			},

			open(item) {

				if(this.detail.status == 'payed' || this.detail.status == 'doing'){
					let param = {
						type: item,
						order_no: this.order_no
					};
					let that = this;
					this.$api.open(param).then(res => {
						console.info(JSON.stringify(res));
						if (res.code == 1) {
					
							if (res.data != null && res.data.is_bt == 1) {
								that.getBtLockData(res.data);
					
							}
						}
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					})
				}else{
					uni.showToast({
						icon: 'none',
						title: '此订单状态不对，不允许操作'
					})
				}
				
			
			},

			getBtLockData(data) {
				let param = {
					shop_id: data.shop_id,
					room_id: data.room_id,
				}
				let that = this;
				this.$api.btLockInfo(param).then(res => {
					if (res.code == 1) {
						console.info(res.data);
						that.openLock(res.data);
					} else {

					}

				})


			},

			openLock(res) {
				uni.showLoading({
					title: "正在开启智能锁",
				})
				const start = Date.now();
				// 调用开锁接口


				var deviceId = res.lockMac;
				var lockData = res.lockData;
				plugin.controlLock(plugin.ControlAction.OPEN, lockData, res => {
					if (res.errorCode === 10003) {
						console.log("获取版本信息时设备连接已断开", res)
					}
				}, null, deviceId).then(res => {
					uni.hideLoading({});
					console.log(res)
					if (res.errorCode == 10012) {
						uni.showModal({
							title: "提示",
							content: "蓝牙未开启,请开启蓝牙",
							showCancel: false,

						})
					}
					if (!!res.deviceId) deviceId = res.deviceId;
					if (res.errorCode === 0) {
						console.info(`已开锁--操作时间:${Date.now() - start}ms.`)
					} else {

						console.info(`开锁失败: ${res.errorMsg}`)
					}
				})
			},

			getDetail() {
				let param = {
					order_no: this.order_no,
				};
				let that = this;
				this.$api.orderDetail(param).then(res => {
					console.info(JSON.stringify(res));
					if (res.code == 1) {
						that.detail = res.data;
						if(that.is_xu == 1){
							that.xuOrder();
						}
					} else {

					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.detail {
		.shareBtn{
			margin: 0;
			padding: 0;
			line-height: 30rpx;
			font-size: 12px;
			border: none;
		}
		.btn {
			background-color: #FABB22;
			width: 380rpx;
			height: 84rpx;
		}

		.lin {
			display: inline-block;
			width: 6rpx;
			height: 30rpx;
			background-color: #FABB22;
			border-radius: 8rpx;
		}

		.borb {
			border-bottom: 2rpx solid #F5F5F5;
		}

		.infobox {
			.status {
				background-color: #FABB22;
			}

			.cover {
				width: 230rpx;
				height: 182rpx;
			}
		}

		.btns {
			position: relative;

			>.flex1 {
				position: relative;
				z-index: 2;

				image {
					width: 60rpx;
					height: 60rpx;
				}
			}
		}
	}
	.w17 {width: 34rpx;height: 34rpx;}
</style>